<template>
    <view class="uni-data-pickerview">
        <view class="selected-area">
            <uv-search placeholder="请输入搜索内容" v-model="keyword" @search="search" @clickIcon="search" @custom="search"
                :showAction="false"></uv-search>
        </view>
        <view class="selected-area">
            <view class="selected-list-header">
                <view class="selected-item-header" v-for="(item, index) in defList" :key="index" :class="{
                'selected-item-active': item.id == selecteddef
            }" @click="defNodeClick(item)">
                    {{ item.name }}
                </view>
            </view>
        </view>
        <view class="tab-c">
            <scroll-view class="tab-c-item" :scroll-y="true">
                <view class="list" v-for="(list, j) in dataList" :key="j">
                    <identifylabelitem :data="list" @handle-node-click="handleNodeClick" :_selected="_selected">
                    </identifylabelitem>
                </view>
            </scroll-view>
        </view>
        <view class="select-item">
            <view class="select-item-view ">
                <view @click="popup.open">
                    已选择：{{ _selected.length }}
                </view>
                <view>
                    <uv-icon name="arrow-up" size="14"></uv-icon>
                </view>
            </view>
            <view :style="{ display: 'flex', gap: '12px' }">
                <uv-button v-if="_selected.length" :custom-style="defaultButton" @click="_selected = []">{{ $t('清空')
                    }}</uv-button>
                <uv-button :custom-style="submitButton" @click="submit">{{ $t('确定')
                    }}</uv-button>
            </view>
        </view>

    </view>
    <uv-popup ref="popup" mode="bottom" @change="(e: any) => pageshow = e.show">
        <view class="popup-context">
            <view class="popup-context-header">
                <view class="select-item">
                    <view class="select-item-view ">
                        <view>
                            已选择：{{ _selected.length }}
                        </view>
                    </view>
                    <view>
                        <uv-button :custom-style="submitButton" @click="popup?.close">{{ $t('确定')
                            }}</uv-button>
                    </view>
                </view>
            </view>
            <scroll-view class="list" :style="{ height: '1px' }" :scroll-y="true">
                <view class="popup-context-view" v-for="(v, i) in _selected" :key="v.id">
                    <uv-tags bgColor="#748ee2" borderColor="#748ee2" color="#ffffff" closable :text="v.name"
                        @close="_selected.splice(i, 1)">
                    </uv-tags>
                </view>
            </scroll-view>

        </view>
    </uv-popup>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import api from '../../api/index'
import { deepTree, searchTree } from '../../util/index'
import { submitButton, defaultButton } from '@/util/style';
import { watch, computed } from 'vue';
import identifylabelitem from './identifylabelitem.vue';
const p = withDefaults(defineProps<{ modelValue: string[], multiple?: boolean }>(), {
    modelValue: () => []
})
import { useI18n } from "vue-i18n";
const pageshow = ref(false)
const popup = ref()

onMounted(() => {
    start()
})
const $t = useI18n().t;
const keyword = ref()

const emit = defineEmits(['update:modelValue', 'change', 'nodeclick', 'submit'])

const _selected = ref<Eps.identifylabelEntity[]>([])


const selecteddef = ref('-1')

function submit() {
    emit('update:modelValue', _selected.value.map(e => e.id))
    emit('submit', _selected.value.map(e => e.id))
}



function search() {
    if (keyword.value) {
        selecteddef.value = ''
        dataList.value = searchTree(columns.value, keyword.value)
    } else {
        dataList.value = []
    }
}


const data = ref<Eps.identifylabelEntity[]>([])
const columns = ref<Eps.identifylabelEntity[]>([])
async function start() {
    api<Eps.identifylabelEntity[]>('/wechat/identifylabel/list').then(e => {
        data.value = e
        columns.value = deepTree(e)
        defList.value = columns.value
        _selected.value = data.value.filter(e => {
            return p.modelValue?.includes(String(e.id))
        })
    }).catch(f => {
        uni.showToast({
            icon: 'error',
            title: f,
            duration: 2000
        });
    })
}

const dataList = ref<Eps.identifylabelEntity[][]>([])
const defList = ref<Eps.identifylabelEntity[]>([])


watch(() => p.modelValue, e => {
    _selected.value = data.value.filter(e => {
        return p.modelValue?.includes(String(e.id))
    })
})

function handleNodeClick(item: Eps.identifylabelEntity) {
    if (!item.children?.length) {
        _dispatchEvent(item)
        const index = _selected.value.findIndex(c => c.id === item.id)
        if (index > -1) {
            _selected.value.splice(index, 1)
        } else {
            _selected.value.push(item)
        }
    } else {
        onSelectedChange(item)
    }
    // 本地数据
}

function defNodeClick(item: Eps.identifylabelEntity) {
    const node = item;
    if (!item.children?.length) {
        _dispatchEvent(node)
        const index = _selected.value.findIndex(c => c.id === item.id)
        if (index > -1) {
            _selected.value.splice(index, 1)
        } else {
            _selected.value.push(item)
        }
    }
    selecteddef.value = String(node.id)
    dataList.value = item.children
    // 本地数据
}
function onSelectedChange(node: Eps.identifylabelEntity) {
    if (node) {
        emit('nodeclick', node)
    }
}

function _dispatchEvent(item: Eps.identifylabelEntity) {
    if (p.multiple) {
        emit('change', _selected.value.map(e => e.id))
    } else {
        emit('change', item.id)
    }
}



</script>

<style scoped lang="scss">
.uni-data-pickerview {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    overflow: hidden;
    height: 100%;

}

.select-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1rpx solid #FF746F;


    .select-item-view {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex: 1;
        gap: 12rpx;
    }
}

.selected-area {
    height: 120rpx;
    display: flex;
    padding-left: 24rpx;
    padding-right: 24rpx;
    align-items: center;
}

.selected-list-header {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 0 5px;
    align-items: center;
    height: 80rpx;
    gap: 20rpx;
    justify-content: center;
    width: 100%;

    .selected-item-header {
        white-space: nowrap;
        color: #748ee2;
        border: 1rpx solid #748ee2;
        padding: 10rpx 12rpx;
        transition: all 0.3s;
        font-size: 36rpx;
        border-radius: 12rpx;
        margin-bottom: 12rpx;
        text-align: justify;
        text-align-last: justify;
    }

    .selected-item-active {
        background-color: #748ee2 !important;
        color: #fff !important;
    }
}


.selected-list {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 0 5px;
    align-items: center;
    padding-left: 45rpx;
    height: 80rpx;
}

.selected-item {
    margin-right: 10px;
    white-space: nowrap;
    color: #748ee2;
    border: 1rpx solid #748ee2;
    padding: 10rpx 12rpx;
    transition: all 0.3s;
    font-size: 36rpx;
    border-radius: 12rpx;
    margin-bottom: 12rpx;
    text-align: justify;
    text-align-last: justify;
    min-width: 88rpx;
}

.selected-item-text-overflow {
    width: 168px;
    /* fix nvue */
    overflow: hidden;
    /* #ifndef APP-NVUE */
    width: 6em;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /* #endif */
}

.selected-item-active {
    background-color: #748ee2;
    color: #fff;
}

.selected-item-text {
    color: #FF746F;
}

.tab-c {
    position: relative;
    flex: 1;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding-left: 12rpx;
    padding-right: 12rpx;


    .tab-c-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12rpx;
        height: 100%;
    }
}

.list {
    flex: 1;
    display: flex;
    border-bottom: 1px solid #eee;
    padding-top: 12rpx;
    flex-direction: column;

}


.is-disabled {
    opacity: .5;
}

.item-text {
    /* flex: 1; */
    color: #333333;
}

.item-text-overflow {
    width: 280px;
    /* fix nvue */
    overflow: hidden;
    /* #ifndef APP-NVUE */
    width: 20em;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /* #endif */
}

.check {
    margin-right: 5px;
    border: 2px solid #FF746F;
    border-left: 0;
    border-top: 0;
    height: 12px;
    width: 6px;
    transform-origin: center;
    /* #ifndef APP-NVUE */
    transition: all 0.3s;
    /* #endif */
    transform: rotate(45deg);
}

.popup-context {
    width: 100vw;
    display: flex;
    gap: 12rpx;
    flex-direction: column;
    height: 50vh;

    .popup-context-header {
        height: 130rpx;
    }

    .popup-context-view {
        height: 84rpx;
        padding: 12rpx;
        display: inline-flex;
    }
}
</style>
